<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>answer</title>
</head>
<body>
<div>
    <div  v-show="!isLogin">
        <p>张三</p>
        <hr>
        <p>现在你看到我了</p>
        <hr>
        <ul>
            <li>学习Java</li>
        </ul>
    </div>
    <div  v-show="isLogin">
        <p v-text=age.name>{{age.name}}</p>
        <hr>
        <hr>
        <ul>
            <li v-for="text in age.item">{{text}}</li>
        </ul>
    </div>

    <hr>
    <p>{{age.msg}}</p>
    <input type="text" v-model="age.msg" value="123">
    <hr>
    <input type="text" v-model="age.info">
    <input type="button" value="获取年龄,将年龄改变成20" @click="f()" >
</div>

<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{age:{},isLogin:false,},
        methods:{
            f:function () {
                v.age={
                    name:"李四",
                    item:["学习JavaScript","学习Vue","整个牛项目"],
                    info:20,
                    msg: 123
                },
                    v.isLogin=true;
            }
        }
    })
</script>
</body>
</html>